<template>
    <div class="storeInfo">
        <div class="head">    
            <el-form :model="form" class="headForm">
                <el-form-item >
                    <el-date-picker
                        v-model="form.date"
                        type="month"
                        value-format="yyyy-MM"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="">
                    <el-select clearable v-model="form.store_type" placeholder="门店类型">
                        <el-option label="直营店" value="1"></el-option>
                        <el-option label="加盟店" value="2"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="">
                    <el-select clearable v-model="form.bill_store_id" placeholder="全部门店">
                        <el-option v-for="(item,a) in storeList" :key="a" :label="item.title" :value="item.store_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-select clearable v-model="form.status" placeholder="结算状态">
                        <!-- '0 = 待生成，1 = 待结算，2 = 已结算 -->
                        <el-option label="待生成" value="0"></el-option>
                        <el-option label="待结算" value="1"></el-option>
                        <el-option label="已结算" value="2"></el-option>
                    </el-select>
                </el-form-item>
                

                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                <el-button type="danger" @click="update">更新结算单</el-button> 
            </el-form>      
        </div>
         
        <!-- tab部分 -->
        <div class="tabContainer">
            <el-table :data="tableData" stripe style="width: 100%;text-align:center">
                <el-table-column prop="date" label="日期" fixed></el-table-column>
                <el-table-column prop="match_type_cn" label="类型">
                    <template slot-scope="scope">
                        <p v-if="scope.row.store_type == 1">直营店</p>
                        <p v-else>加盟店</p>

                    </template>
                </el-table-column>
                <el-table-column prop="store_name" label="门店" width="200"></el-table-column>
                <el-table-column prop="settlement_price" label="商户应收">
                    <template slot-scope="scope">
                        <i>{{scope.row.settlement_price}}</i>
                        
                        <el-tooltip placement="right" v-if="scope.row.has_record_meituan==0 || scope.row.has_record_koubei==0">
                            <div slot="content">{{scope.row.tips1}}<br/>{{scope.row.tips2}}</div>
                            <i class="el-icon-warning-outline"></i>
                        </el-tooltip>
 
                    </template>
                    
                </el-table-column>
                <el-table-column prop="status_cn" label="状态"></el-table-column>
                
                <el-table-column prop="status_cn" label="回执单">
                    <template slot-scope="scope">
                        <p v-if="scope.row.settlement_certificate_img !=''">
                            <img style="width:60px" :src="scope.row.settlement_certificate_img" alt="">
                        </p>
                        <p v-else>--</p>
                    </template>
                </el-table-column>
                <el-table-column prop="awards" label="打款日期">
                    <template slot-scope="scope">
                        <p v-if="scope.row.payment_time!= '0000-00-00 00:00:00'">{{scope.row.payment_time}}</p>
                        <p v-else>--</p>
                    </template>
                </el-table-column>
                <el-table-column prop="end_time" label="美团结算金额录入" width="150">
                    <template slot-scope="scope">
                        <p v-if="scope.row.has_record_meituan == 0" class="lightFont" @click="record(1,scope.row.store_id,scope.$index)">录入</p>
                        <p v-else>已录入</p>
                    </template>
                </el-table-column>
                <el-table-column prop="status_cn" label="口碑结算金额录入" width="150"> 
                    <template slot-scope="scope">
                        <p v-if="scope.row.has_record_koubei == 0" class="lightFont" @click="record(2,scope.row.store_id,scope.$index)">录入</p>
                        <p v-else>已录入</p>
                    </template>
                </el-table-column>
                <el-table-column  label="操作" prop="price_id" v-if="limitList.length>0">
                    <template  slot-scope="scope">            
                        <span v-for="(item,indexLimit) in limitList" :key="indexLimit" class="lightFont" @click="theClick(item.url,scope.row)">
                            <i>{{item.name}}</i><i v-if="indexLimit != limitList.length-1">&nbsp;|&nbsp;</i>
                        </span>
                    </template>

                </el-table-column>
                <el-table-column label="操作"  v-else>/</el-table-column>

            </el-table>
                        
        </div>
        <!-- 分页部分 -->
        <!-- 分页部分 -->
        <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            @current-change="changePage"
            :page-size="size"
            :current-page.sync="pageNum"
            :hide-on-single-page=true
            :total="total">{{total}}
        </el-pagination>

    </div>
</template>
<style lang="scss">
.prizeBox{
    .el-form-item__content{
        display: flex;
        flex-direction: row;
        justify-content:space-between;
        .goodsearch{
            width:333px;
        }
        .quntanty{
            width:130px;
        }
    }
}
</style>
<script>
import { abc } from "../../../../js/abc.js";
import {potUrl} from '../../../../js/config_url.js'; 
import GoodsTemplate from '../../pop/goodslist.vue';
import Upimg from '../../pop/upload.vue'
// import {draggable} from 'vuedraggable';
var url= potUrl.rpriceList;
// let dateobj = new Date()
// let m = dateobj.getMonth()>9?dateobj.getMonth():'0'+dateobj.getMonth()
// currenMonth = dateobj.getFullYear() +'-'+ m
// console.log(currenMonth)
export default {
    components:{
        GoodCom:GoodsTemplate,
        Upimg,
    },
    data(){
        return {          
            tableData:[],
            total:50,
            size:20,
            pageNum:1,
            form:{
                size:20,
                page:1,
                date: abc.getpremonth()//currenMonth

            },
            recordParams:{},//录入弹框的内容参数
            recordShow:false,//录入弹框
            platfromTxt:'',//录入显示弹框时显示：美团-口碑
            bill_store_id:'',//录入时需要的id参数
            storeList:[],
            limitList:[
                {url:"detail",name:'详情'},
                {url:'export',name:'导出'}
            ]
        }
    },
    mounted(){
        var that = this;
        abc.get(that,potUrl.storefranchisee,{},(res)=> {
            that.storeList = res.data
        })//获取门店列表-

        abc.get(that,potUrl.settlementbill,that.form,(res)=>{
            that.total = parseInt(res.data.length)
            that.tableData =  res.data
        });//列表
        
    },
    watch:{
        tableData:(n,o)=>{
            if(n.length == 0) return
            n.map((item,i)=>{
                let str='';
                if(item.has_record_meituan == 0){
                    item.tips1 = "美团结算金额未录入"
                }else{
                    item.tips1 =''
                }
                if(item.has_record_koubei == 0){
                    item.tips2 = '口碑金额未录入'
                }else{
                    item.tips2 = ''
                }
            })
            
        }
    },
    methods:{
        search(){
            const that = this;
            console.log(that.form)
            abc.get(that,potUrl.settlementbill,that.form,(res)=>{
                // if(that.t)
                that.total = parseInt(res.data.total)
                that.tableData =  res.data;
                console.log(that.tableData)
            });//列表
        },
        theClick(url,a){
            var that = this;
            if(url == 'detail'){
                this.$router.push({name:'/accountDetaile',params:{"store_name":a.store_name,"dateM":a.date,store_id:a.store_id},path:'/accountDetaile'})
                console.log(this.$route)
            }else{
                let iData = '?token=' + abc.getSession('token') + '&user_id=' + abc.getSession('user_id') + '&store_id=' + a.store_id + '&platform=operate' + '&date=' + a.date;
    		    window.location.href = abc.hostUrl + '/operate/settlement/exportv2' + iData;
            }            
        },           
        changePage(val){
            var that = this;
            that.pageNum = val;
            this.form.page = val;
           abc.getList(that,url,that.form);
        },

        confrim(a){
            //确定按钮
            var that = this,url='';
            if(a == '添加' || a == '复制'){
                url = potUrl.matchadd
            }else{
                url = potUrl.matchedit;
                that.editForm.match_id = that.match_id
            }
            that.editForm.awards[0].award_num = that.prizeNum;
            abc.post(that,url,that.editForm,function(res){
                that.add_edit_show = false;
                abc.get(that,potUrl.settlementbill,that.form,function(res){
                    that.total = parseInt(res.data.total)
                    that.tableData =  res.data.list;
                    console.log(that.tableData)
                });//列表
            })
        },
        record(a,b,c){
            console.log(c)
            let that = this;
            that.bill_store_id = b;
            that.recordShow = true;
            that.index = c;
            a==1?this.platfromTxt='美团':this.platfromTxt="口碑"
        },
        recordConfrim(){
            //settlementrecord
            let that = this;
            var params = that.recordParams;
            if(that.platfromTxt == '美团'){
                params.type = '1'
            }else{
                params.type='2'
            }
            params.bill_store_id = that.bill_store_id;
            params.date = that.form.date;

            abc.post(that,potUrl.settlementrecord,params,(res)=>{
                if(params.type == 1){
                    that.tableData[that.index].has_record_meituan='1';
                    that.tableData[that.index].tips1=''
                }else{
                    that.tableData[that.index].has_record_koubei='1';
                    that.tableData[that.index].tips2=''
                }
                that.recordShow = false;
            })
        },
        update(){
            let that = this;
            let obj = {};
            obj.bill_store_id = that.form.bill_store_id;
            obj.date = that.form.date
            abc.post(that,potUrl.manualupdatebill,obj,(res)=>{
                abc.get(that,potUrl.settlementbill,that.form,(res)=>{
                    that.total = parseInt(res.data.total)
                    that.tableData =  res.data;
                });//列表
            })
        }
    }
}

</script>